<template>
  <div class="container">
    <div class="time_picker">
      <div class="left flex">
        <view>开始:</view>
        <picker mode="date" :value="startDate" start="2000-01-01" :end="finalDate" @change="startDateChange">
          <view class="picker">{{startDate}}</view>
        </picker>
      </div>
      <div class="right flex">
        <view>结束:</view>
        <picker mode="date" :value="endDate" start="2000-01-01" :end="finalDate" @change="endDateChange">
          <view class="picker">{{endDate}}</view>
        </picker>
      </div>
    </div>
    <div class="allfeat">{{money}}总业绩: {{allfeat}}元</div>
    <scroll-view :scroll-y="true" :style="{height:scrollHeight + 'px'}">
      <ul v-if="serviceData.length != 0">
        <li v-for="item in serviceData" :key="item.id">
          <div class="left flex-item">
            <span class="user_pic">
              <img :src="item.headurl" alt>
            </span>
            <div class="user_name">
              <span>{{item.name}}</span>
              <span class="billtype">{{item.type}}</span>
              <span class="cashyeji">{{money}}业绩: {{item.feat}}元</span>
            </div>
          </div>
        </li>
      </ul>
      <ul v-else>
        <Empty message="没有业绩信息!"></Empty>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import moment from 'moment'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      userid: 0,
      startTime: '',
      endTime: '',
      startDate: '',
      endDate: '',
      scrollHeight: 0,
      serviceData: [],
      finalDate: '',
      checkxianjin: true,
      money: '现金',
      allfeat: 0
    }
  },
  async onLoad () {
    this.userid = wx.getStorageSync('params_userid')
    let start = wx.getStorageSync('service_start');
    let end = wx.getStorageSync('service_end');

    this.startTime = moment(start).unix();
    this.endTime = moment(end).unix();
    this.startDate = moment(start).format('YYYY-MM-DD');
    this.endDate = moment(end).format('YYYY-MM-DD');
    this.finalDate = moment(new Date()).format('YYYY-MM-DD');

    this.checkxianjin = wx.getStorageSync('service_xianjin');
    this.checkxianjin === true ? this.money = '现金' : this.money = '卡耗'
    await Promise.all(
      this.getlist(),
      this.getswiperheight()
    )
  },
  methods: {
    async getlist () {
      this.serviceData = [];
      this.allfeat = 0;
      let res = [];
      if (this.checkxianjin === true) {
        res = await api.getworkerservice({ info: JSON.stringify({ uid: this.userid, start: this.startTime, end: this.endTime }) });
      } else {
        res = await api.getworkerkhyeji({ info: JSON.stringify({ uid: this.userid, start: this.startTime, end: this.endTime }) });
      }
      let allfeat = 0;
      res.forEach((rs) => {
        allfeat += rs.feat;
        rs.headurl = rs.headurl === '0' ? 'http://mytimg.178mr.com/myt_default.jpg' : rs.headurl;
        rs.type = rs.ordertype === 'KKD' ? '开卡' : rs.ordertype === 'LSD' ? '开单' : rs.ordertype === 'CZD' ? '充值' : rs.ordertype === 'TQD' ? '退款' : '其他'
      })
      console.log(allfeat)
      this.allfeat = allfeat.toFixed(2);
      console.log(this.allfeat)
      this.serviceData = res;
    },
    async getswiperheight () {
      const that = this;
      try {
        const res = wx.getSystemInfoSync()
        that.scrollHeight = res.windowHeight - 85
      } catch (e) {

      }
    },
    startDateChange (e) {
      let startDate = moment(e.target.value).unix();
      let endDate = moment(this.endDate).unix();
      if (startDate > endDate) {
        Toast('结束时间小于开始时间', 'noicon');
        return false
      } else {
        this.startDate = e.target.value;
        this.startTime = moment(e.target.value).unix()
        this.getlist();
      }
    },
    endDateChange (e) {
      let endDate = moment(e.target.value).unix();
      let startDate = moment(this.startDate).unix();
      if (startDate > endDate) {
        Toast('结束时间小于开始时间', 'noicon');
        return false
      } else {
        this.endDate = e.target.value;
        this.endTime = moment(e.target.value).unix()
        this.getlist();
      }
    }
  }
}
</script>
<style>
.time_picker {
  display: flex;
  width: 100%;
  height: 100rpx;
  border-bottom: 4rpx solid #f44444;
  font-size: 32rpx;
  color: #f44444;
  background-color: #fff;
}
.time_picker > div {
  width: 50%;
  height: 100%;
}
.container ul {
  background-color: #fff;
}
li {
  display: flex;
  position: relative;
  height: 128rpx;
  padding-left: 20rpx;
}
li::after {
  position: absolute;
  content: "";
  width: 98%;
  left: 20rpx;
  bottom: 0;
  height: 2rpx;
  background-color: rgba(153, 153, 153, 0.1);
}
li .left {
  display: flex;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
li .left {
  display: flex;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
li .left .user_pic {
  display: flex;
  align-items: center;
}
li .left .user_name {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  padding-top: 20rpx;
}
li .left .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.cashyeji {
  font-size: 30rpx;
  color: rgba(153, 153, 153, 1);
}
.billtype {
  margin-left: 30rpx !important;
  font-size: 30rpx;
  position: absolute;
  top: 20rpx;
  right: 30rpx;
  color: rgba(153, 153, 153, 1);
}
.allfeat {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 20rpx;
  font-size: 30rpx;
  color: rgba(53, 53, 53, 1);
  background-color: rgba(153, 153, 153, 0.3);
}
</style>
